<style include="app-management-cros-shared-css">
  .permission-text-row:first-of-type {
    border-top: none;
  }

  #no-permissions {
    border-top: none;
  }
</style>
<div>
  <div class="permission-list">
    <app-management-pin-to-shelf-item
        id="pin-to-shelf-setting"
        class="permission-card-row separated-row header-text"
        app="[[app_]]">
    </app-management-pin-to-shelf-item>

    <div id="permissions-card" class="permission-card-row"
        hide-bottom-border$="[[app_.hideMoreSettings]]">
      <div class="permission-section-header">
        <div class="header-text">$i18n{appManagementPermissionsLabel}</div>
      </div>
      <div class="indented-permission-block">
        <template is="dom-repeat"
            items="[[getPermissionMessages_(messages_)]]" as="message">
          <div class="permission-text-row">
            [[message]]
          </div>
          <div id="second-level-permissions" class="indented-permission-block">
            <template is="dom-repeat"
                items="[[getPermissionSubmessagesByMessage_(index, messages_)]]"
                as="submessage">
              <div class="permission-text-row">
                [[submessage]]
              </div>
            </template>
          </div>
        </template>
        <template is="dom-if" if="[[!hasPermissions_(messages_)]]">
          <div id="no-permissions" class="permission-text-row">
            $i18n{appManagementNoPermissions}
          </div>
        </template>
      </div>
    </div>

    <app-management-more-permissions-item id="more-settings"
        class="permission-card-row separated-row" app="[[app_]]"
        hidden$="[[app_.hideMoreSettings]]"
        more-permissions-label="$i18n{appManagementMorePermissionsLabel}">
    </app-management-more-permissions-item>
</div>
